<script setup>
import { defineProps, ref, watch } from "vue";
import CheckBox from "./Checkbox.vue";
import { styleJson, manStyleJson } from "./json/style";

const props = defineProps({
  styleType: {
    type: String,
    default: "",
  },
  picList: {
    type: Array,
    default: () => [], // 使用函数返回默认值
  },
  gender: {
    type: String,
    default: "",
  },
});

console.log('geneticStyle  -------------------------------------', props.gender)

const styleTypeDesc = ref("");
const styleTypeJson = ref();
const showPreview = ref(false);
const currentPreviewImage = ref("");

watch(
  () => props.styleType,
  (newVal) => {
    const json = props.gender === "男" ? manStyleJson : styleJson;
    styleTypeJson.value = json.map((item) => ({
      ...item,
      checked: item.type === newVal,
    }));
    styleTypeDesc.value = styleTypeJson.value.find(
      (item) => item.type === props.styleType
    )?.value;
  },
  { deep: true, immediate: true }
);

const previewImage = (imageUrl) => {

  currentPreviewImage.value = imageUrl;
  showPreview.value = true;
};

const closePreview = (e) => {
  // 阻止事件冒泡
  e.stopPropagation();
  showPreview.value = false;
  currentPreviewImage.value = "";
};
</script>

<template v-if="styleTypeJson">
  <view class="title">基因风格</view>
  <view class="container">
    <template v-for="item of styleTypeJson">
      <CheckBox :checked="item.checked">{{ item.type }}</CheckBox>
    </template>
    <view class="desc">
      {{ styleTypeDesc }}
    </view>
  </view>
  <view class="pic-container">
    <image
      v-for="(pic, index) in picList"
      :key="index"
      :src="pic"
      class="pic"
      mode="aspectFill"
      @click="previewImage(pic)"
    ></image>
  </view>

  <!-- 图片预览遮罩层 -->
  <view v-if="showPreview" class="preview-mask" @click="closePreview">
    <view class="preview-container" @click.stop>
      <image
        :src="currentPreviewImage"
        class="preview-image"
        mode="widthFix"
		@click="closePreview"
      ></image>
    </view>
  </view>
</template>

<style scoped>
.title {
  padding-left: 20px;
  line-height: 21px;
  margin-bottom: 12px;
}

.container {
  padding: 0 26px;
  text-align: justify;
}

.desc {
  color: #4e4e4e;
  margin-top: 10px;
}

.pic-container {
  display: flex;
  padding: 20px 18px;
}

/* .pic {
  width: 100px;
  height: 100px;
  background-color: #eee;
  border-radius: 4px;
} */

/* 预览遮罩层样式 */
.preview-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.preview-container {
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}
</style>